<template>
  <div class="title-main">
    <div class="top-title">
      <div class="top-left">
        欢迎登录天沁财富网，投资有风险，选择需谨慎！
      </div>
      <div class="top-right" v-if="!secondPage">
        <ul>
          <template v-if="!nologin">
          <li>欢迎您：&nbsp;</li>
           <li class="login loginname"><a href="javascript:;">{{ this.$store.state.userinfo.nickname }}</a>
            <a class="extend" @click="exit" rel="nofollow">退出登录</a>
           </li>
           <i class="el-icon-arrow-down"></i>
          </template>
          <template v-if="nologin">
             <li class="login"><a href="javascript:;" @click="registered" rel="nofollow">登陆</a></li>
          <li class="fenge">|</li>
          <li class="regist"><a @click="registered" rel="nofollow">注册</a></li>
          </template>
          <!-- <li class="fenge">|</li>           -->
          <!-- <li><a href="">公告</a></li> -->
          <li class="fenge">|</li>
          <li class="weixin"><a href="javascript:;" rel="nofollow">官方微信</a>
          <div class="weixinimg">
             <img src="http://p6dwecco6.bkt.clouddn.com/img/qr_code_weixin.jpg" alt="">
             <p>更多内容,请关注天沁财富官方微信</p>
          </div>
          </li>
          <li class="fenge">|</li>
          <li class="lianxiwomen"><nuxt-link to="/about" rel="nofollow">联系我们</nuxt-link></li>
          <li class="fenge">|</li>
          <li class="map"><span>站点地图</span>
              <div class="mapdetail">
                   <el-row :gutter="20">
                      <el-col :span="6">
                        <div class="mapdetaillist">
                          <h1>理财产品</h1>
                          <ul>
                            <li><nuxt-link to="/equity" target="_blank">PE</nuxt-link></li>
                            <li><nuxt-link to="/trust" target="_blank">信托资管</nuxt-link></li>
                            <li><nuxt-link to="/fund" target="_blank">契约基金</nuxt-link></li>
                          </ul>
                        </div>
                      </el-col>

                      <el-col :span="6">
                        <div class="mapdetaillist">
                             <h1>新闻资讯</h1>
                            <ul>
                              <li><nuxt-link to="/advisory" target="_blank">财经头条</nuxt-link></li>
                              <li><nuxt-link to="/advisory" target="_blank">宏观新闻</nuxt-link></li>
                              <li><nuxt-link to="/advisory" target="_blank">财经新闻</nuxt-link></li>
                              <li><nuxt-link to="/advisory" target="_blank">市场新闻</nuxt-link></li>
                            </ul>
                        </div>
                      </el-col>
           
              
                      <el-col :span="6">
                         <div class="mapdetaillist">
                              <h1>天沁投研</h1>
                              <ul>
                                <li><nuxt-link to="/research" target="_blank">投资策略</nuxt-link></li>
                                <li><nuxt-link to="/research" target="_blank">信托内参</nuxt-link></li>
                                <li><nuxt-link to="/research" target="_blank">信托内参</nuxt-link></li>
                                <li><nuxt-link to="/research" target="_blank">基金内参</nuxt-link></li>
                                <li><nuxt-link to="/research" target="_blank">天沁新闻</nuxt-link></li>
                              </ul>
                         </div>
                      </el-col>
             

               
                      <el-col :span="6">
                            <div class="mapdetaillist noborder">
                                  <h1>关于我们</h1>
                              <ul>
                                <li><nuxt-link to="/about" target="_blank">天沁财富简介</nuxt-link></li>
                                <li><nuxt-link to="/about" target="_blank">董事长致辞</nuxt-link></li>
                                <li><nuxt-link to="/about" target="_blank">风险提示函</nuxt-link></li>
                                <li><nuxt-link to="/about" target="_blank">联系我们</nuxt-link></li>
                                <li><nuxt-link to="/protocol" target="_blank">使用条款</nuxt-link></li>
                                <li><nuxt-link to="/protocol" target="_blank">隐私协议</nuxt-link></li>
                                <li><nuxt-link to="/protocol" target="_blank">使用协议</nuxt-link></li>
                              </ul>
                            </div>
                      </el-col>
                 </el-row>
              </div>

          </li>
        </ul>
      </div>      
  </div>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      loginmsg: "登录"
    };
  },
  props: {
    secondPage: {
      type: Boolean,
      default: false
    },
    nologin:{
      type: Boolean,
      default: true
    }
  },
  methods: {
    registered() {
      this.$store.state.showlogin = true;
    },
    exit(){
      localStorage.clear();
      this.$store.state.nologin = true;
      this.$store.state.userinfo = {};
      this.$store.state.showlogin = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.map span{
  cursor: pointer;
}
.map:hover .mapdetail{
  display: block;
}
.mapdetail{
  border: 1px solid #ccc;
  background: white;
  width: 1200px;
  height: 240px;
  position: absolute;
  left: 0;
  top: 34px;
  z-index: 1000;
  display: none;
}
.map .mapdetail ul{
  overflow: hidden;
  margin-left: 20px;
}
.map .mapdetail ul li{
  display: inline-block;
  float: left;
  width: 50%;
}

.map .mapdetail ul li a{
    padding: 0;
    float: left;
    text-align: left;
    color: #666;
}
.mapdetaillist{ 
  border-right: 1px dashed #ccc;
  width: 100%;
  height: 210px;
}
.map .mapdetail h1{
  font-weight: bolder;
    font-size: 16px;
    color: #444;
    margin-bottom: 15px;
    padding: 0;
    text-align: left;
    margin: 20px;
}
.noborder{
  border: none;
}
.regist{
  color: #cd9c54;
}
.lianxiwomen:hover{
  color: #cd9c54; 
}
.extend{
  display: none;
  position: absolute;
  background: #dfdfdf;
  width: 95px;
  color: white;
}
.loginname{
  position: relative;
}
.loginname:hover .extend{
  display:block;
}
.weixin {
  position: relative;
}
.weixin .weixinimg {
  display: none;
  position: absolute;
  z-index: 999;
  left: -34px;
  background: white;
}
.weixin:hover {
 color: #cd9c54;

}
.weixin:hover .weixinimg {
  display: block;
}
.weixinimg p{
  color: black;
  font-weight: bolder;
  font-size: 14px;
  line-height: 16px;
}
.title-main {
  width: 100%;
  background: #dfdfdf;
}
.top-title {
  width: 1200px;
  margin: 0 auto;
  height: 34px;
  line-height: 34px;
  position: relative;
  
}
.top-left {
  display: inline-block;
  height: 34px;
  width: 350px;
  line-height: 34px;
}
.top-right {
  display: inline-block;
  height: 34px;
  width: 500px;
  line-height: 34px;
  margin-left: 20px;
  float: right;
}
.top-right ul {
  text-align: right;
}
.top-right ul li {
  display: inline-block;
  text-align: center;
}
.top-right ul a {
  cursor: pointer;
}
.top-right ul .fenge {
  width: 30px;
  text-align: center;
}
.top-right ul .login {
  color: #cd9c54;
}
</style>
